<template>
  <div ref="dashboard_main" class="dashboard-main">
    <!-- 准备一个容器 -->
    <!-- <div id="test" /> -->
    <div class="full" @click="fullScreen">
      <i class="el-icon-full-screen" />
    </div>
    <div class="head-img">
      <span class="head-title">数据大屏</span>
      <span class="currenttime">{{ CurrentTime }}</span>
    </div>
    <div class="container">
      <div class="left">
        <div class="text-head">
          <span>电商数据</span>
          <span class="sapn1">Shell Data</span>
        </div>
        <div class="money-box">
          <!-- 滚动数字 -->
          <div class="count-container">
            <div class="count-title">
              <span class="l">销售量</span>
              <span class="w">万元</span>
            </div>
            <countTo :start-val="startVal" :end-val="endVal" :duration="3000" />
          </div>

          <div class="pro-title">
            <div>完成百分比</div>
            <div class="pro-main">
              <div ref="proNum" class="num">{{ sliderValue }}%</div>
              <div class="pro-bar">
                <div ref="proInner" class="pro-inner" />
              </div>
              <div ref="triangle" class="triangle" />
            </div>
          </div>

          <!-- 热门搜索词 -->
          <div class="text-head">
            <span>热门搜索词</span>
            <span class="sapn1">Top Search</span>
          </div>
        </div>

        <!-- 字符云 -->
        <div class="word-container">
          <WordEchart />
        </div>
      </div>

      <div class="center">
        <!-- 柱状图 -->
        <div class="order-return-bar">
          <OrderReturnBarEchart />
        </div>
        <!-- 地图 -->
        <div class="map-container">
          <MapEchart />
        </div>
        <!-- 饼状图 -->
        <div class="pie-container">
          <PieEchart />
        </div>
      </div>

      <div class="right">
        <div class="text-head">
          <span>统计数据</span>
          <span class="sapn1">Statistics Data</span>
        </div>
        <div class="num-box">
          <div class="box1">
            <img class="box-img" src="../../assets/b1.png" alt="">
            <div class="box-sum">
              85.6
              <div class="sum-warpper">订单总数 (万)</div>
            </div>
          </div>
          <div class="box1">
            <img class="box-img" src="../../assets/b1.png" alt="">
            <div class="box-sum">
              85.6
              <div class="sum-warpper">订单总数 (万)</div>
            </div>
          </div>
          <div class="box1">
            <img class="box-img" src="../../assets/b1.png" alt="">
            <div class="box-sum">
              85.6
              <div class="sum-warpper">订单总数 (万)</div>
            </div>
          </div>
          <div class="box1">
            <img class="box-img" src="../../assets/b1.png" alt="">
            <div class="box-sum">
              85.6
              <div class="sum-warpper">订单总数 (万)</div>
            </div>
          </div>
        </div>
        <div class="text-head">
          <span>大额订单Top</span>
          <span class="sapn1">Supper Orders</span>
        </div>
        <el-row :gutter="20" class="row" style="font-weight: 700;">
          <el-col :span="6" :offset="0">时间</el-col>
          <el-col :span="6" :offset="0">物品</el-col>
          <el-col :span="6" :offset="0">数量</el-col>
          <el-col :span="6" :offset="0">金额</el-col>
        </el-row>
        <template v-for="item in orderBigOrder">
          <el-row :key="item.goods" :gutter="20" class="row">
            <el-col :span="6" :offset="0">12-22</el-col>
            <el-col :span="6" :offset="0">{{ item.goods }}</el-col>
            <el-col :span="6" :offset="0">{{ item.num }}</el-col>
            <el-col :span="6" :offset="0">{{ item.sum }}</el-col>
          </el-row>
        </template>

      </div>
    </div>
    <!-- 动态粒子 -->
    <div class="bg-animate">
      <BgAnimate />
    </div>
  </div>
</template>

<script>
// 1. 引入echarts库
// import * as echarts from 'echarts'
import countTo from 'vue-count-to'
import WordEchart from './components/WordEchart'
import MapEchart from './components/MapEchart'
import PieEchart from './components/PieEchart'
import BgAnimate from './components/BgAnimate'

import screenfull from 'screenfull'
import OrderReturnBarEchart from '@/views/dashboard/components/OrderReturnBar'

export default {
  name: 'Dashboard',
  components: {
    OrderReturnBarEchart,
    countTo,
    WordEchart,
    MapEchart,
    PieEchart,
    BgAnimate
  },
  data() {
    return {
      startVal: 100000,
      endVal: 120100284,
      sliderValue: 55,
      orderBigOrder: [],
      CurrentTime: ''
    }
  },

  mounted() {
    /*   // 3. 初始化 echarts 实例
      const myChart = echarts.init(document.getElementById('test'))
      // 4. 配置options
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        // X轴
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        // Y轴
        yAxis: {},
        // 文档名
        series: [
          {
            name: '销量',
            // bar 表示柱状图
            type: 'line',
            data: [0, 2, 26, 15, 23, 20]
          },
          {
            name: '退货',
            // bar 表示柱状图
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 5. 设置选项
      myChart.setOption(option) */
    setTimeout(() => {
      this.changeNum()
    }, 3000)
    this.generateTenRandomAmounts()
    setInterval(() => {
      this.getCurrentTime()
    }, 1000)
  },
  methods: {
    // 获取时间戳
    getCurrentTime() {
      var now = new Date()
      var year = now.getFullYear()
      var month = ('0' + (now.getMonth() + 1)).slice(-2)
      var day = ('0' + now.getDate()).slice(-2)
      var hours = ('0' + now.getHours()).slice(-2)
      var minutes = ('0' + now.getMinutes()).slice(-2)
      var seconds = ('0' + now.getSeconds()).slice(-2)

      this.CurrentTime = year + '-' + ' ' + month + '-' + ' ' + day + ' ' + hours + ' ' + ':' + ' ' + minutes + ' ' + ':' + ' ' + seconds
    },

    // 全屏
    fullScreen() {
      if (screenfull.isEnabled) {
        // 控制是否全屏的按钮
        console.log(this.$refs.dashboard_main)
        screenfull.toggle(this.$refs.dashboard_main)
      }
    },

    changeNum() {
      // 获取DOM元素的引用
      const divProNum = this.$refs.proNum
      const divProInner = this.$refs.proInner
      const divTriangle = this.$refs.triangle

      // 直接操作DOM元素
      divProNum.style.left = '88%'
      divTriangle.style.left = '88%'
      divProInner.style.width = '88%'
      this.sliderValue = 88
      clearTimeout
    },
    randomOrder() {

    },
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min
    },
    generateRandomAmount() {
      const minAmount = 0
      const maxAmount = 100

      const randomAmount = this.getRandomNumber(minAmount, maxAmount)

      return randomAmount
    },
    generateRandomSum() {
      const minAmount = 1000
      const maxAmount = 100000

      return this.getRandomNumber(minAmount, maxAmount)
    },
    generateTenRandomAmounts() {
      for (let i = 0; i < 10; i++) {
        const randomAmount = this.generateRandomAmount()
        const randomSum = this.generateRandomSum()
        this.orderBigOrder.push({
          time: '12-22',
          goods: '物品' + (i + 1),
          num: randomAmount,
          sum: randomSum
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-main {
  background-color: #0f1c3c;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  // 全屏
  .full {
    width: 25px;
    height: 20px;
    position: absolute;
    top: 25px;
    left: 15px;
    border: 2px solid #8d9bc5;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
    color: #8d9bc5;
  }

  .text-head {
    font-size: 22px;
    font-weight: normal;
    color: #9aa8d4;
    position: relative;
    margin-bottom: 20px;

    .sapn1 {
      margin-left: 10px;
      color: #344d69;
    }
  }

  .head-img {
    position: relative;
    margin: 0 auto;
    background: url(../../assets/b6.png);
    background-size: 100% 100%;
    background-position: 50%;
    width: 70%;
    height: 122px;
    text-align: center;
    line-height: 100px;
    font-size: 36px;

    .head-title {
      font-family: Microsoft Yahei, Arial, sans-serif;
      font-size: 36px;
      color: #fff;
      text-shadow: #fff 0 0 15px;
      font-weight: 700;
    }

    .currenttime {
      position: absolute;
      right: -190px;
      top: -20px;
      margin-right: 20px;
      font-family: Microsoft Yahei, Arial, sans-serif;
      font-size: 20px;
      color: #fff;
      font-weight: 400;
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // width: 100%;
    // height: 100%;

    .left {
      width: 25%;
      padding: 10px;
      box-sizing: border-box;

      // height: ;
      .money-box {
        width: 100%;
        // height: 350px;

        .count-container {
          width: 95%;
          // overflow: hidden;
          color: #fff;
          font-size: 60px;
          font-weight: 700;

          .count-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            font-weight: normal;
            margin: 10px 0 10px 0;

            .l {
              color: #9aa8d4;
            }

            .w {
              color: #73aae5;
            }
          }

        }

        .pro-title {
          margin-top: 25px;
          font-size: 16px;
          color: #9aa8d4;

          .pro-main {
            position: relative;
            margin: 20px auto;
            width: 100%;
            height: 50px;

            .num {
              position: absolute;
              font-size: 20px;
              font-weight: 700;
              color: #fff;
              width: 45px;
              text-align: center;
              left: 50%;
              margin-left: -30px;
              -webkit-transition: all .4s ease;
              transition: all .4s ease;
            }

            .pro-bar {
              position: absolute;
              top: 65%;
              -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
              width: 100%;
              height: 10px;
              border-radius: 5px;
              background-color: #283052;

              .pro-inner {
                transition: all .4s ease;
                border-radius: 5px;
                width: 50%;
                height: 10px;
                background: linear-gradient(90deg, #24cbff 30%, #9000ff);
              }
            }

            .triangle {
              transition: all .4s ease;
              position: absolute;
              top: 40px;
              margin-left: -10px;
              left: 50%;
              width: 0;
              height: 0;
              border-top: 0 solid transparent;
              border-right: 10px solid transparent;
              border-left: 10px solid transparent;
              border-bottom: 10px solid #fff;
            }
          }
        }
      }

      .word-container {
        width: 100%;
        height: 400px;
        background-color: #16223c;
      }
    }

    .center {
      width: 50%;
      display: flex;
      // justify-content: space-evenly;
      flex-wrap: wrap;

      .order-return-bar {
        width: 100%;
        height: 380px;
      }

      .map-container {
        width: 48%;
        height: 320px;
      }

      .pie-container {
        width: 48%;
        height: 320px;
      }
    }

    .right {
      width: 25%;
      // height: 500px;

      .num-box {
        width: 100%;
        height: 150px;
        margin-top: 20px;
        margin-bottom: 20px;
        // padding-right: 50px;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;

        .box1 {
          width: 48%;
          height: 50%;
          display: flex;
          padding-right: 30px;
          justify-content: space-between;
          align-items: center;

          .box-img {
            width: 33%;
            color: #9000ff;
          }

          .box-sum {
            font-size: 34px;
            font-weight: 700;
            color: #fff;

            .sum-warpper {
              font-size: 12px;
              color: #b0c2f9;
            }
          }
        }
      }

      .row {
        color: #8b99c4;
        height: 40px;
        width: 98%;
        font-size: 16px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #303e68;
        border-bottom: transparent;
      }

      .row:last-child {
        border-bottom: 1px solid #303e68;
      }
    }
  }

  .bg-animate {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
  }

}
</style>
